<template>
    <div class="container">
        <!-- 左侧步骤列表 -->
        <div class="steps">
          <StepDisplay
            :steps="steps"
            :currentStep="currentStep"
          />
        </div>
        <!-- 右侧日志区域 -->
        <div class="logs">
          <LogDisplay :logs="logs" />
        </div>
      </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from "vue";
  import StepDisplay from "../components/StepDisplay.vue";
  import LogDisplay from "../components/LogDisplay.vue";
  import { invoke } from "@tauri-apps/api";
  
  // 初始化步骤
  const steps = reactive([
    { id: 1, name: "选择项目目录", completed: false },
    { id: 2, name: "执行打包命令", completed: false },
    { id: 3, name: "上传文件并创建软连接", completed: false },
    { id: 4, name: "打开访问地址", completed: false },
    { id: 5, name: "完成提示", completed: false },
  ]);
  
  const logs = ref([]); // 日志列表
  const currentStep = ref(0); // 当前步骤索引
  
  // 自动执行步骤
  const executeStep = async () => {
    if (currentStep.value < steps.length) {
      const step = steps[currentStep.value];
      try {
        logs.value.push(`开始执行步骤 ${step.id}: ${step.name}`);
        await invoke(`execute_step_${step.id}`); // 调用后端逻辑
        step.completed = true;
        logs.value.push(`完成步骤 ${step.id}: ${step.name}`);
      } catch (error) {
        logs.value.push(`步骤 ${step.id} 执行失败: ${error.message}`);
      } finally {
        currentStep.value++;
        if (currentStep.value < steps.length) {
          setTimeout(executeStep, 1000); // 继续执行下一步
        } else {
          logs.value.push("所有步骤完成！");
        }
      }
    }
  };
  
  onMounted(() => {
    executeStep(); // 页面加载时开始执行步骤
  });
  </script>
  
  <style scoped>
  .container {
    display: flex;
    height: 100vh;
  }
  .steps {
    flex: 1;
    background-color: #f5f5f5;
    border-right: 1px solid #ddd;
    overflow-y: auto;
  }
  .logs {
    flex: 2;
    padding: 20px;
    background-color: #fff;
    overflow-y: auto;
  }
  </style>
  